<template>
 <div class="container-wrapper">
   <div  class="top-wrapper">
    <div class="image-wrapper">
    <img src="https://media.kaolaplay.com/avatar.jpg">
    </div>
    <div>微信名称</div>
   </div>
   <div  class="bg-wrraper">
<mt-cell to="/visit" title="我的预约" is-link>
  <span ></span>
</mt-cell>
<mt-cell  to="/info" title="我的信息" is-link>
  <span ></span>
</mt-cell>
   </div>
 </div>
</template>

<script>
import { MessageBox, Toast } from "mint-ui";
export default {
  name: "Index",
  data() {
    return {};
  },
  created(){
    this.$nextTick(()=>{
      console.log("999")
      this.$emit("tabchange","user")
    })
  },
  methods: {
    myVisit(){
      this.$router.push({
        path:"/visit"
      })
    },
    myInfo(){
      this.$router.push({
        path:"/info"
      })
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.container-wrapper{
  position: absolute;
   top: 0;
   bottom: 0;
    width: 100%;
   background: rgb(245, 245, 245)
}
.top-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding-top: 20px;
  padding-bottom: 10px;
  background: rgb(61, 136, 248);
}
.top-wrapper .image-wrapper {
    position: relative;
   width: 70px;
   margin: 0 auto;
  border-radius: 50%;
  border: 10px solid rgba(255, 255, 255, 0.2);
}
.top-wrapper .image-wrapper img {
  padding: relative;
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 10px solid rgba(255, 255, 255, 0.4);
 
}

.top-wrapper div {
  padding: relative;
  text-align: center;
  margin-top: 10px;
  font-size: 16px;
  color: white;
}


.bg-wrraper {
position: relative;
  top: 130px;
  padding-top: 40px;


}
</style>
